<template>
  <div class="list-drag-demo">
    <el-button @click="getData">获取数据（建议使用低速网络）</el-button>
    <div style="margin-top: 10px;"><el-progress type="circle" :percentage="progress" /></div>
    <div class="container">  
      <ul class="list">       
        <li v-for="item in datas" :key="item.ename">
          <a :href="'https://pvp.qq.com/web201605/herodetail/' + item.ename + '.shtml'" target="_blank">
            <img :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + item.ename + '/' + item.ename + '.jpg'" alt="" />
            <span>{{ item.cname }}</span>
          </a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
// import { ref } from 'vue'
// import { request } from '../ajax/ajax-fetch.js'
// const progress = ref(0)
// const datas = ref(null);
// const options = {
//   url: 'https://study.duyiedu.com/api/herolist',
//   method: 'get',
//   onProgress: (e) => {
//     // console.log("进度",e)
//     console.log("进度值", (e.loaded/e.total*100).toFixed(2))
//     progress.value = Number((e.loaded/e.total*100).toFixed(2))
//   },
//   data: null
// }
// const getData = async () => {
//   await request(options).then(res => {   
//     console.log(res)
//     datas.value = JSON.parse(res).data;
//     console.log('shuju', datas.value)
//   })
// }
</script>

<style scoped>
.list-drag-demo {
  padding: 20px;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}

body {
  background: #ecedf2;
}
.container {
  width: 100%;
  margin: 1em auto;
}

.list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  justify-items: center;
  text-align: center;
  font-size: 14px;
  row-gap: 20px;
  color: #333;
}
.list img {
  width: 77px;
  height: 77px;
  display: block;
  margin-bottom: 5px;
  border: 2px solid #5f89cf;
  border-radius: 10px 0 10px 0;
}


</style>